<template>
    <div>
        <h3 class="box-title">商品信息</h3>
        <el-table :data="goodsList" style="width: 100%">
            <el-table-column
                    prop="date"
                    label="商品信息"
                    align="center">
                <div class="goods" slot-scope="{row}">
                    <RouterLink to="/">
                        <img :src="row.picture" alt="">
                    </RouterLink>
                    <div>
                        <p class="name ellipsis">{{row.name}}</p>
                        <p class="attr">{{row.attrsText}}</p>
                    </div>
                </div>
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="单价"
                    width="220"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="数量"
                    prop="count"
                    width="180"
                    align="center"/>

            <el-table-column
                    label="小计"
                    width="180"
                    align="center">
                <div slot-scope="{row}" style="color: #CF4444">¥{{row.totalPrice}}</div>
            </el-table-column>
            <el-table-column
                    label="实付"
                    width="140"
                    align="center">
                <div slot-scope="{row}" style="color: #CF4444">¥{{row.totalPayPrice}}</div>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "PayGoods",
        props: {
            list: {
                default: () => [],
                type: Array
            }
        },
        computed: {
            goodsList() {
                if (this.list && this.list.length) {
                    return this.list
                }
                return []
            }
        }
    }
</script>

<style scoped lang="less">

    .box-title {
        margin-top: 30px;
        font-size: 16px;
        font-weight: normal;
        padding-left: 10px;
        line-height: 70px;
        border-bottom: 1px solid #f5f5f5;
    }

    .goods {
        display: flex;
        align-items: center;

        img {
            width: 80px;
            height: 80px;
        }

        > div {
            padding-left: 10px;

            .attr {
                font-size: 14px;
                color: #999;
            }
        }
    }

</style>